<template>
  <section class="sp-section">
     <section class="oa-classify">
    <h2>流程发起</h2>
     <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部流程" name="0">
          <all-list :list="list"></all-list>
        </el-tab-pane>
        <el-tab-pane label="绩效流程" name="1">
          <jx-list :jxlist = "jxlist"></jx-list>
        </el-tab-pane>
        <el-tab-pane label="业务流程" name="2">
          <yw-list :ywlist="ywlist"></yw-list>
        </el-tab-pane>
        <el-tab-pane label="待办事务" name="3">
          <db-list :getWait="getWait" v-if="getWait && getWait.length"></db-list>
          <div v-else class="oa-classify__empty">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="我发起的" name="4">
          <my-list :getMy="getMy" v-if="getMy && getMy.length" @refresh="getMyListFunc"></my-list>
          <div v-else class="oa-classify__empty">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="我审批的" name="5">
          <done-list :getDone="getDone" v-if="getDone && getDone.length" @refresh="getDoneListDo"></done-list>
          <div v-else class="oa-classify__empty">暂无数据</div>
        </el-tab-pane>
        <el-tab-pane label="抄送列表" name="6">
          <copy :getCopy="getCopy" v-if="getCopy && getCopy.length"></copy>
          <div v-else class="oa-classify__empty">暂无数据</div>
        </el-tab-pane>
        <!-- <el-tab-pane label="okr列表" name="7">
          <el-radio-group v-model="radio">
              <el-radio border v-for="(item, index) in getUserGroupList" :label="item.id" :key="index">{{ item.name }}</el-radio>
          </el-radio-group>
          <okr :getOkr="getOkr" :radio="radio" v-if="getOkr && getOkr.length"></okr>
          <div v-else class="oa-classify__empty">暂无数据</div>
        </el-tab-pane> -->
      </el-tabs>
      <el-form :inline="true" class="demo-form-inline" v-if="activeName == 4">
        <el-form-item label="">
          <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="搜索我发起的事项"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline" v-if="activeName == 3">
        <el-form-item label="">
          <el-input v-model="keyword2" prefix-icon="el-icon-search" placeholder="搜索待办事项"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit2">搜索</el-button>
        </el-form-item>
      </el-form>
      <el-form :inline="true" class="demo-form-inline" v-if="activeName == 5">
        <el-form-item label="">
          <el-input v-model="keyword3" prefix-icon="el-icon-search" placeholder="搜索我审批的"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit3">搜索</el-button>
        </el-form-item>
      </el-form>
  </section>
  <div v-if="(activeName == 4 && total > 10) || (activeName == 3 && total > 10) || (activeName == 5 && total > 10) || (activeName == 6 && total > 10)|| (activeName == 7 && total > 10)">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="curPage"
        @current-change="handleCurrentChange"
        :total="total">
      </el-pagination>
  </div>
  </section>
</template>
<script>
import { allList, dbList, jxList, myList, ywList, doneList, copy, okr } from './index.js'
import { getOaList, getWaitList, getMyList, getDoneList, getCopy, orkList, okrPosition, getUserGroup } from '@/api/oa/index.js'
export default {
  name: '',
  components: {
    allList, dbList, jxList, myList, ywList, doneList, copy, okr
  },
  props: {},
  data () {
    return {
      radio: '',
      position: [],
      classify: ['全部流程', '绩效流程', '业务流程', '待办事务', '我发起的', '抄送列表'],
      activeName: 0,
      classifyIndex: 0,
      notice: 0,
      list: [],
      ywlist: [],
      jxlist: [],
      userInfo: {},
      getWait: [],
      getMy: [],
      curPage: 1,
      total: 0,
      keyword: '',
      keyword2: '',
      keyword3: '',
      getDone: [],
      getOkr: [],
      flag: false,
      getCopy: [],
      getUserGroupList: []
    }
  },
  watch: {
    activeName () {
      this.curPage = 1
    },
    radio () {
      this.curPage = 1
      this.getOrkList()
    }
  },
  created () {
    this.userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
  },
  mounted () {
    this.$nextTick(() => {
      this.getClassify()
      const activeName = this.$route.query.activeName
      if (activeName) {
        this.activeName = activeName + ''
      }
      if (this.activeName === '3') {
        this.getWaitListFunc()
      }
      if (this.activeName === '4') {
        this.getMyListFunc()
      }
      if (this.activeName === '5') {
        this.getDoneListDo()
      }
      if (this.activeName === '6') {
        this.getCopyDo()
      }
      if (this.activeName === '7') {
        this.okrPositionHandle()
        // this.getUserGroupHandle()
        this.radio = this.$route.query.radio
        this.getOrkList()
      }
    })
  },
  destroyed () {},
  methods: {
    async getUserGroupHandle () {
      const { status, data } = await getUserGroup()
      if (status) {
        const obj = {
          name: '全部',
          id: ''
        }
        const arr = []
        arr.push(...data, obj)
        this.getUserGroupList.push(...arr)
      }
    },
    async okrPositionHandle () {
      this.getUserGroupList = []
      const { status, data } = await okrPosition()
      if (status) {
        const arr = data.filter(item => item.id === 34 || item.id === 35 || item.id === 38)
        this.getUserGroupList.push(...arr)
        this.getUserGroupHandle()
      }
    },
    // 获取表单分类
    async getClassify () {
      const { data } = await getOaList()
      this.list = data
      this.ywlist = data.filter(item => item.type === 1)
      this.jxlist = data.filter(item => item.type === 2)
      console.log(this.ywlist)
    },
    getWaitListFunc () {
      const params = {
        small_openid: this.userInfo.openid,
        // openid: this.userInfo.openid,
        openid: window.localStorage.getItem('token'),
        page: this.curPage
      }
      if (this.keyword2) {
        params.keyword = this.keyword2
      }
      getWaitList(params).then(res => {
        const { status, data } = res
        if (status) {
          this.getWait = data.data
          this.total = data.total
        }
      })
    },
    getMyListFunc () {
      const params = {
        small_openid: this.userInfo.openid,
        openid: window.localStorage.getItem('token'),
        page: this.curPage
      }
      if (this.keyword) {
        params.keyword = this.keyword
      }
      getMyList(params).then(res => {
        const { status, data } = res
        if (status) {
          this.getMy = data.data
          this.total = data.total
        }
      })
    },
    getDoneListDo () {
      const params = {
        small_openid: this.userInfo.openid,
        openid: window.localStorage.getItem('token'),
        page: this.curPage
      }
      if (this.keyword3) {
        params.keyword = this.keyword3
      }
      getDoneList(params).then(res => {
        const { status, data } = res
        if (status) {
          this.getDone = data.data
          this.total = data.total
        }
      })
    },
    getCopyDo () {
      const params = {
        small_openid: this.userInfo.openid,
        openid: window.localStorage.getItem('token'),
        page: this.curPage
      }
      getCopy(params).then(res => {
        const { status, data } = res
        if (status) {
          this.getCopy = data.data
          this.total = data.total
        }
      })
    },
    getOrkList () {
      const params = {
        position_id: '',
        group_id: '',
        small_openid: this.userInfo.openid,
        openid: window.localStorage.getItem('token'),
        page: this.curPage
      }
      if (this.radio === 34 || this.radio === 35 || this.radio === 38) {
        params.position_id = this.radio
        params.group_id = ''
      } else {
        params.position_id = ''
        params.group_id = this.radio
      }
      orkList(params).then(res => {
        const { status, data } = res
        if (status) {
          data.data.forEach(item => {
            item.month = item.created_at.substring(5, 7)
            if (item.comment && item.comment.length) {
              item.comment.forEach(j => {
                if (j.name === '目标评级') {
                  item.targetName = j.field_val
                } else if (j.name === '自我评级') {
                  item.myself = j.field_val
                } else if (j.name === '直属上级评级') {
                  item.boss = j.field_val
                }
              })
            }
          })
          this.getOkr = data.data
          this.total = data.total
        }
      })
    },
    onSubmit () {
      console.log(1)
      if (this.keyword) {
        this.curPage = 1
        this.getMyListFunc()
      } else {
        this.$message.error('关键字不能为空')
      }
    },
    onSubmit2 () {
      console.log(2)
      if (this.keyword2) {
        this.curPage = 1
        this.getWaitListFunc()
      } else {
        this.$message.error('关键字不能为空')
      }
    },
    onSubmit3 () {
      console.log(3)
      if (this.keyword3) {
        this.curPage = 1
        this.getDoneListDo()
      } else {
        this.$message.error('关键字不能为空')
      }
    },
    handleCurrentChange (val) {
      this.curPage = val
      if (this.activeName === '3') {
        this.getWaitListFunc()
      }
      if (this.activeName === '4') {
        this.getMyListFunc()
      }
      if (this.activeName === '5') {
        this.getDoneListDo()
      }
      if (this.activeName === '6') {
        this.getCopyDo()
      }
      if (this.activeName === '7') {
        this.okrPositionHandle()
        // this.getUserGroupHandle()
        this.getOrkList()
      }
    },
    handleClick (tab) {
      this.activeName = tab.index
      this.curPage = 1
      this.total = 0
      if (this.activeName === '3') {
        this.getWaitListFunc()
      }
      if (this.activeName === '4') {
        this.getMyListFunc()
      }
      if (this.activeName === '5') {
        this.getDoneListDo()
      }
      if (this.activeName === '6') {
        this.getCopyDo()
      }
      if (this.activeName === '7') {
        this.okrPositionHandle()
        // this.getUserGroupHandle()
        this.getOrkList()
      }
    }
  }
}
</script>
<style lang="less">
  .el-pagination {
    text-align: right;
  }
  .oa-classify {
    display: flex;
    flex-direction: column;
    padding: 20px;
    position: relative;
    z-index: 1;
    .demo-form-inline {
      background-color: #fff;
      position: absolute;
      right:0;
      top:74px;
      z-index:1;
      height: 35px;
      overflow: hidden;
    }

    & > h2 {
      font-weight: normal;
      font-size: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid #ccc;
    }

    &__ {

     &sub {
       font-size:12px;
       color:#409EFF;
     }
      &hd {
        height:40px;
        line-height: 40px;
        background-color:#eee;
        border-bottom: 1px solid #ccc;
        td {
              padding: 5px 10px;
            }
      }
      &table {
        width:100%;
      }
      &empty {
        text-align: center;
        padding: 50px;
      }
      &title {
        background: #eee;
        padding: 5px 10px;
        border-bottom: 1px solid #ccc;
        font-size: 12px;
        color: #666;
      }

      &list {
        padding-bottom: 10px;
      }

      &link {
        display: flex;
        align-items: center;
        margin-bottom: 10px;

        span {
          flex: 1;
        }

        a {
          display: block;
          padding: 2px 10px;
          background: #fe7300;
          border-radius: 2px;
          text-align: center;
          color: #fff;
          font-size: 12px;
        }
      }
    }
  }
</style>
